<template>
    <view class="page">
        <comHead :datas="datasObj"> <template #headerContent>
                <view class="search" style="height: 140rpx;">
                    <view class="inputbox">
                        <up-input @blur="hanleBlur" @focus="hanleFocus" @clear="searchDel" placeholder="请输入关键词搜索"
                            @enter="Search" placeholderStyle="font-size: 28rpx;color: #D1D1D1;" border="none" clearable
                            v-model="searchValue" prefixIcon="search"
                            prefixIconStyle="font-size: 32px;color: #333333;font-weight: bold;"></up-input>
                    </view>
                    <view class="button" @click="Search"> 搜索 </view>
                </view>
            </template>
        </comHead>
        <view class="content_box">
            <view class="card_box" v-for="item in dataList" :key="item.id">
                <view class="card_box_banner">
                    <image class="wh-100" src="https://cdn.oss.bon-top.cn/static_bc/images/bt_banner.jpg"></image>
                    <view class="log">
                        <image class="wh-100" :src="item.cover" mode="aspectFill" />
                    </view>
                </view>
                <view class="card_box_title ft-28 c-33 fw-800 mt-30">{{ item.name }}</view>
                <view class="card_box_name ft-24 c-66  mt-20">{{ item.full_name }}</view>
                <view class="card_box_tag flex  mt-30">
                    <view class="tags bd-r40" v-for="tagItem in item.tag" :key="tagItem">{{ tagItem }}</view>
                </view>
                <view class="card_box_userNumber">
                    <text>{{ '老师数' }} <text class="ft-num3 ft-34 c-33">{{ item.sale_num }}</text></text>
                    <text class="line"
                        style="display: inline-block;width: 2rpx;height: 30rpx;background-color: #F1F1F1;margin-left: 10rpx;margin-right: 10rpx;"></text>
                    <text>{{ '咨询数' }} <text class="ft-num3 ft-34 c-33">{{ item.consult_num }}</text></text>
                    <text class="line"
                        style="display: inline-block;width: 2rpx;height: 30rpx;background-color: #F1F1F1;margin-left: 10rpx;margin-right: 10rpx;"></text>
                    <text>{{ '项目数' }}<text class="ft-num3 ft-34 c-33">{{ item.product_num }}</text> </text>

                </view>
                <view class="card_box_des mt-20">
                    <view v-html="item.des"></view>
                </view>
                <view class="card_box_btn flex ">
                    <view class="btn" @click="goPage(item.id)">品牌详情</view>
                    <view class="btn add" :class="selectId == item.id ? 'active' : ''" @click="selectBtn(item)">
                        <!-- {{selectId == item.id ? '取消' : '选择' }} -->
                        选择
                    </view>
                </view>

            </view>
        </view>
        <view style="height: 88rpx;"></view>

    </view>
</template>
<script setup lang="js">
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance, nextTick } from 'vue';
import { utils } from '@/utils/utils.js';
import { api } from '@/utils/api.js';
import comHead from '@/components/comHead.vue';
let datasObj = reactive({
    title: '品牌商',
    img: '',
    color: '#FFFFFF',
    direction: '',
    scrollTop: 0,
    noBack: false,
    height: 88
})
const selectId = ref(0)
const { proxy } = getCurrentInstance()
const selectItem = ref({})
const selectBtn = (item) => {
    selectItem.value = item
    selectId.value = item.id
    const eventChannel = proxy.getOpenerEventChannel();
    eventChannel.emit('getProject', { ...selectItem.value });
    uni.navigateBack(-1)

}
const searchValue = ref('');
const searchDel = () => {
    searchValue.value = ''
    getBrandList(searchValue.value)

}
const Search = () => {
    getBrandList(searchValue.value)
}
const dataList = ref([])
const getBrandList = (val) => {
    let obj = {}
    if (val) obj.keywords = val

    utils.request(api.getBrandList, obj, 'get',).then(res => {
        console.log('res', res)
        dataList.value = res.data.items

        dataList.value.forEach(f => {
            f.des = f.des.length > 100 ? f.des.slice(0,100) + '...' : f.des
            console.log(f.des.length)
        })
    })
}
const goPage = (id) => {
    uni.navigateTo({ url: '/subpackage/brandParty/brandPartyDetail?id=' + id })
}

onLoad(() => {
    getBrandList()
    nextTick(() => {
        const eventChannel = proxy.getOpenerEventChannel();
        eventChannel.on('dataFun', (data) => {
            console.log('data', data)
            selectItem.value = dataList.value.find(f => f.id == data.id)
            selectId.value = data.id
        });
    })

})
</script>
<style lang="scss">
.search {
    width: 100%;
    display: flex;
    box-sizing: border-box;
    padding: 30rpx 15rpx 0;
    justify-content: center;
    border-top: 2rpx solid #F1F1F1;

    .inputbox {
        // width: 574rpx;
        width: 100%;
        flex: 1;
        height: 80rpx;
        display: flex;
        align-items: center;
        background: #f8f8f8;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        border: 2rpx solid #333333;
    }

    .button {
        margin-left: 20rpx;
        width: 96rpx;
        height: 80rpx;
        background: #333333;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #ffffff;
        text-align: center;
        line-height: 80rpx;
    }
}

.content_box {
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;

    .card_box {
        background: #F8F8F8;
        box-sizing: border-box;
        padding: 20rpx 20rpx 0;
        border-radius: 40rpx;
        margin-bottom: 20rpx;

        &_banner {
            width: 650rpx;
            height: 232rpx;
            border-radius: 40rpx;
            overflow: hidden;
            margin: 0 auto;
            position: relative;

            .log {
                position: absolute;
                top: 0;
                left: calc(50% - (176rpx / 2));
                width: 176rpx;
                height: 52rpx;
                background-color: #fff;
                border-radius: 0 0 20rpx 20rpx;
                padding: 4rpx 20rpx;
                box-sizing: border-box;
            }
        }

        &_tag {
            justify-content: flex-start;
            gap: 20rpx;

            .tags {
                padding: 12rpx 20rpx;
                background: #F1F1F1;
                font-size: 24rpx;
                color: #666;
            }
        }

        &_userNumber {
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            background-color: #fff;
            font-size: 24rpx;
            color: #666;
            height: 74rpx;
            border-radius: 20rpx;
            margin-top: 20rpx;
        }

        &_des {
            background-color: #fff;
            border-radius: 20rpx;
            padding: 20rpx;
            font-size: 24rpx;
            color: #666;
            max-height: 194rpx;
            overflow: hidden;
            // text-overflow: ellipsis;
            // display: -webkit-box;
            // -webkit-line-clamp: 6;
            // /* 限制显示的行数为2 */
            // -webkit-box-orient: vertical;
            // line-height: 1.5;
            /* 必须定义行高 */

        }

        &_btn {
            justify-content: flex-end;
            padding: 20rpx 0;

            .btn {
                width: 136rpx;
                height: 58rpx;
                font-size: 24rpx;
                line-height: 58rpx;
                text-align: center;
                color: #333333;
                background: #FFFFFF;
                border-radius: 20rpx 20rpx 20rpx 20rpx;
            }

            .add {
                color: #DBF046;
                background-color: #333333;
                margin-left: 22rpx;
            }

            .active {
                color: #fff;
                background-color: #333333;
                margin-left: 22rpx;
            }
        }
    }

}
</style>